<template>
	<view class="app-container">
		<view class="title">
			<text>数据更新时间：{{deviceData[0].updateOn}}</text>
		</view>
		<view class="title-grid">
			<view class="title-grid-item" v-for="(item,index) in deviceData" >
				<text>{{item.sensorType}}</text>
				<text style="color: #000000;">{{item.data}}{{item.unit}}</text>
			</view>
		</view>
		<view class="title">
			<text>最近5小时数据展示图</text>
		</view>
		<view>
			<view class="charts-box" v-for="(item,index) in echartsData" :key="item.unit">
				<qiun-data-charts :loadingType="0" :animation="false" type="area" :canvasId="'canvasid'+index"
					:canvas2d="true" :ontouch="true"
					:opts="{padding:[ 10, 20, 10, 0 ],enableScroll:false,itemCount:5,labelCount:5,dataLabel:false,xAxis:{scrollShow: true,},yAxis:{ showTitle: true,data:[{title:item.unit,tofix: 1,min:0 }]},extra:{area:{type:'curve',addLine:true,gradient:true}}}"
					:chartData="item" />
			</view>
		</view>
	</view>
</template>

<script>
	import * as that from '@/API/index.js'
	export default {
		name: "tab",
		data() {
			return {
				id: '',
				deviceData: '',
				echartsData: []
			};
		},
		onLoad({id}) {
			this.id = id
		},
		onShow() {
			this.getgetExperimentData()
			this.getExperimentEcharts()
		},
		methods: {
			getgetExperimentData() {
				that.experimentsData(this.id).then(res => {
					this.deviceData = res.data
					console.log(res)
				})
			},
			// 获取实验图
			getExperimentEcharts() {
				that.experimentsEcharts(this.id).then(res => {
					console.log(res)
					let temperature = res.data[0].data
					for (let item of res.data) {
						let temp = {
							unit: item.unit,
							categories: [],
							series: [{
								name: item.id,
								data: []
							}],
						}
						for (let value of item.data) {
							temp.series[0].data.push(value.data)
							temp.categories.push(value.time.substr(11))
						}
						this.echartsData.push(temp)
					}
					console.log(11)
					console.log(this.echartsData)
				})
			}

		},
	};
</script>

<style lang="scss">
	.title{
		@include  flex;
		font-size: $uni-font-size-16;
		color: #000000;
	}
	.title-grid{
		background-color: #eceaea;
		border-radius: 10rpx;
		margin: $uni-spacing-10 0;
		padding: $uni-spacing-10 0;
		display: grid;
		text-align: center;
		grid-template-rows: repeat(3, 100rpx);
		grid-template-columns: repeat(3, 33.3%);
		.title-grid-item{
			@include  flex;
			flex-direction: column;
		}
	}
	.charts-box {
		width: 96%;
		margin: 0 auto;
		height: 300px;
	}
</style>
